<template>
  <el-dialog :destroy-on-close="true" style="width: 40%;padding: 0 2%;">
    <template #header="{ titleId, titleClass }" >
      <div style="height: 30px;margin-top: -2%;">
      <h4 :id="titleId" :class="titleClass">{{ title }}</h4>
      </div>
    </template>
    <div v-if="dialogVisible">
      <el-form :rules="rules" :model="roomdata" ref="roomdata" label-width="80px">
        <el-form-item label="房号" prop="number">
          <el-input v-model="roomdata.number" :disabled="nowid == 0 ? false : true" placeholder="请输入房号"/>
        </el-form-item>
        <el-form-item label="房型名称" prop="r_name">
          <el-input v-model="roomdata.r_name" placeholder="请输入房型"/>
        </el-form-item>
        <el-form-item label="备注" prop="bz">
          <el-input v-model="roomdata.bz"/>
        </el-form-item>
        <el-form-item label="上架/下架" prop="sjxj">
          <el-radio-group v-model="roomdata.sjxj">
            <el-radio label="true">上架</el-radio>
            <el-radio label="false">下架</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <querenQuxiao  @okHandler="okHandler" @cancelHandler="cancelHandler"></querenQuxiao>
    <div style="clear: both;"></div>
  </el-dialog>
</template>

<script>
import { ElMessage } from 'element-plus'
import querenQuxiao from './queren_quxiao.vue'
import { getRoomsApi, checkRoomsApi } from '../api/roomApi'
export default {
  components:{querenQuxiao},
  props: ['dialogVisible', 'nowid'],
  data() {
    return {
      roomdata: {
        r_name: '',
        number: '',
        bz: '',
        sjxj: 'true'
      },
      title: '添加房型',
      rules: {
        r_name: [
          {
            required: true,
            message: '请输入房型名称',
            trigger: 'blur'
          },
          {
            pattern: /^[\u4E00-\u9FA5]+$/,
            message: '请输入中文房型名称',
            trigger: 'blur'
          },
          {
            validator: async (rule, value, callback) => {
              if (!this.nowid) {
                let { count } = await checkRoomsApi(value);
                if (count == 0) {
                  callback();
                } else {
                  callback(new Error('房型已存在，请重新输入'));
                }
              }
            },
            trigger: 'blur',
          }
        ],
        number: [
          {
            required: true,
            message: '请填写房号',
            trigger: 'blur'
          },
          {
            pattern: /^\d+$/,
            message: '请输入数字类型',
            trigger: 'blur'
          }]
      }
    }
  },
  methods: {
    okHandler() {
      this.$refs.roomdata.validate((allRight) => {
        if (allRight) {
          this.$emit('dialogOk', {
            roomdata: this.roomdata
          })
        }
      })
    },
    cancelHandler() {
      this.$emit('dialogCancel');
    }
  },
  watch: {
    async dialogVisible() {
      if (this.nowid == 0) {
        this.title = "添加房型"
        this.roomdata = {
          r_name: '',
          number: '',
          bz: '',
          sjxj: 'true'
        }
      } else {
        this.title = "修改房型"
        const res = await getRoomsApi(this.page,this.pagesize,this.nowid)
        const result = res.results[0]
        if (result != null) {
          this.roomdata = {
            r_name: result.r_name,
            number: result.number,
            bz: result.bz,
            sjxj: result.sjxj
          };
        } else {
          ElMessage({
            type: 'error',
            message: '没有找到指定房型，请联系管理员'
          });
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>